import { Component, OnInit } from '@angular/core';

// 引入服务
import { MyserviceService } from 'src/app/services/myservice.service';


// 引入RxJS的map,filter工具模块
import { map,filter } from 'rxjs/operators'
@Component({
  selector: 'app-rxjs',
  templateUrl: './rxjs.component.html',
  styleUrls: ['./rxjs.component.css']
})
export class RxjsComponent implements OnInit {

  constructor(private myserve:MyserviceService) { }

  ngOnInit(): void {
    //1. 同步方法
    let data = this.myserve.getData()
    console.log(data)

    //2. callback获取异步数据
    this.myserve.getCallbackData((data:any)=>{
      console.log(data,'回调函数')
    })

    //3. promise获取异步数据
    this.myserve.getPromiseData().then((res) => {
      console.log(res,'Promise')
    })

    // 4.RxJS获取异步数据
    this.myserve.getRxjsData().subscribe((res) => {
      console.log(res,'RxJS')
    })

    // 5.使用unsubscribe撤回操作
    // 如果异步方法还未执行，就可以撤回
    let rxjsFn = this.myserve.getRxjsData()
    let data2 = rxjsFn.subscribe((res) => {
      console.log(data,'RxJS的subscribe值')
    })
    // 通过subscribe的值来取消
    // 效果：一秒后取消getRxjsData的执行
    setTimeout(() => {
      // unsubscribe取消订阅
      data2.unsubscribe()
    }, 1000); //此处的延迟时间小于getRxjsData中的延迟（模拟在异步函数执行前撤回




    // 6.Promise多次执行(Promise不能做到
    let p2 = this.myserve.getPromiseDataInterval()
    p2.then((res) => {
      console.log(res,'Promise多次执行')
    })
    // 7.RxJS多次执行
    // let r2 = this.myserve.getRxjsDataInterval()
    // r2.subscribe((res) => {
    //   console.log(res,'RxJS多次执行')
    // })



    // 8.通过工具方法对数据进行处理
    let num = this.myserve.getRxjsNumInterval()
    // 在管道pipe中使用工具方法
    // filter返回满足条件的值
    // num.pipe(
    //   filter((item:any) =>{
    //     return item%2 == 0
    //   })
    // ).subscribe((res) => {
    //   console.log(res,'-----filter')
    // })

    // map为变量，与ES5中类似
    // num.pipe(
    //   map((item:any) => {
    //     return item * item
    //   })
    // ).subscribe((res) => {
    //   console.log(res,'-----map')
    // })


    // 可在管道（pipe）中使用多个方法
    // num.pipe(
    //   filter((item:any) => {
    //     return item%2 ==0
    //   }),
    //   map((item) => {
    //     return item * item
    //   })
    // ).subscribe((res) => {
    //   console.log(res,'-----多个工具结合使用')
    // })
  }

}
